<template>
    <div class="app-container">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
            <el-form-item label="" prop="paramDoubleQuery">
                <el-input v-model="queryParams.paramDoubleQuery" clearable placeholder="变量名称" size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :border="false" v-if="multiple == false" ref="sequenceTable" v-loading="loading" :data="bDeviceRealDataList" class="checkTable" height="350px" @select="selectRow">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="设备名称" prop="deviceName" />
            <el-table-column :show-overflow-tooltip="true" align="center" label="变量名称" prop="paramName" />
            <el-table-column :show-overflow-tooltip="true" align="center" label="变量类型" prop="readWriteType">
                <template slot-scope="scope">
                    <span v-if="scope.row.readWriteType == 2">开关量</span>
                    <span v-else-if="scope.row.readWriteType == 3">设置量</span>
                    <span v-else>模拟量</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="变量标识" prop="paramField" />
            <el-table-column align="center" label="变量单位" prop="paramUnit" />
        </el-table>
        <el-table :border="false" v-else v-loading="loading" :data="bDeviceRealDataList" height="350px" @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="设备名称" prop="deviceName" />
            <el-table-column :show-overflow-tooltip="true" align="center" label="变量名称" prop="paramName" />
            <el-table-column :show-overflow-tooltip="true" align="center" label="变量类型" prop="readWriteType">
                <template slot-scope="scope">
                    <span v-if="scope.row.readWriteType == 2">开关量</span>
                    <span v-else-if="scope.row.readWriteType == 3">设置量</span>
                    <span v-else>模拟量</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="变量标识" prop="paramField" />
            <el-table-column align="center" label="变量单位" prop="paramUnit" />
        </el-table>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import request from '@/utils/request';

export default {
    name: 'BDeviceRealData',
    props: {
        deviceImei: String,
        // 非多个禁用
        multiple: Boolean,
        textStatic: String,
    },
    components: {
        Pagination,
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            // multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 设备实时数据表格数据
            bDeviceRealDataList: [],
            driveNameOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 999,
                paramName: null,
                paramDoubleQuery: null,
                driveName: null,
                orderByColumn: 'id',
                isAsc: 'desc',
                ztGuid: this.$route.query.guid,
            },
            selectRowData: {},
            selectRowsData: [],
        };
    },
    created() {
        this.getList();
    },
    mounted() {},
    methods: {
        selectRow(val, row) {
            this.$refs.sequenceTable.clearSelection();
            this.$refs.sequenceTable.toggleRowSelection(row, true);
            this.selectRowData = row;
        },
        selectRowDataClick() {
            return this.selectRowData;
        },
        selectRowsDataClick() {
            return this.selectRowsData;
        },
        readWriteTypeFormat(row) {
            if (row.readWriteType == 1) {
                return '只读';
            } else {
                return '读写';
            }
        },
        registerTypeFormat(row) {
            if (row.registerType == 1) {
                return '线圈(0x)';
            } else if (row.registerType == 2) {
                return '离散输入(1x)';
            } else if (row.registerType == 3) {
                return '保持寄存器(4x)';
            } else if (row.registerType == 4) {
                return '输入寄存器(3x)';
            } else if (row.registerType == 5) {
                return 'I输入寄存器';
            } else if (row.registerType == 6) {
                return 'Q输出寄存器';
            } else if (row.registerType == 7) {
                return 'M位寄存器';
            } else if (row.registerType == 8) {
                return 'V数据寄存器';
            }
        },
        dataTypeFormat(row) {
            if (row.dataType == 0) {
                return '16位整型(无符号)';
            } else if (row.dataType == 1) {
                return '16位整型(有符号)';
            } else if (row.dataType == 2) {
                return '32位整型(无符号)';
            } else if (row.dataType == 3) {
                return '32位整型(有符号)';
            } else if (row.dataType == 4) {
                return '浮点型';
            } else if (row.dataType == 5) {
                return 'Bit位';
            }
        },
        driveNameFormat(row) {
            let val = '';
            this.driveNameOptions.map((item) => {
                if (item.value == row.driveName) {
                    val = item.label;
                }
            });
            return val;
        },
        /** 查询设备实时数据列表 */
        getList() {
            this.loading = true;
            let url = '/zutai/bDeviceRealData/getBindDatalist';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            })
                .then((res) => {
                    if (res.code == 200) {
                        this.bDeviceRealDataList = res.rows;
                        this.total = res.total;
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    // console.log(error)
                    this.loading = false;
                });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.paramDoubleQuery = '';
            this.queryParams.driveName = '';
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            // console.log("多选选中的记录",selection);
            this.selectRowsData = [];
            selection.forEach((element) => {
                this.selectRowsData.push(element.paramName);
            });
        },
    },
};
</script>
<style lang="scss">
.el-form-item .el-form-item__label {
    font-size: 12px !important;
    color: #626262 !important;
    font-weight: 400 !important;
    letter-spacing: 0.75px !important;
}

.el-upload--picture-card {
    width: 100px !important;
    height: 80px !important;
    line-height: 80px !important;
}

.box__message {
    padding: 20px;
    border: 1px solid #f4dfb6;
    background: #fffbf4;
    text-align: left;
}

.checkTable > .el-table__header-wrapper > table > thead > tr > th:first-child > div {
    display: none !important;
}
</style>
